// MyComponent.tsx
import { defineComponent } from 'vue'

export interface MyComponentProps {
  title: string
}

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  emits: ['custom-event'],
  setup(props, { slots, emit }) {
    const handleButtonClick = () => {
      emit('custom-event', `来自 ${props.title} 的消息`)
    }

    return () => (
      <div class="my-component">
        <h3>{props.title}</h3>
        <div>
          {slots.default ? slots.default({ message: '这是作用域插槽的数据' }) : <p>默认插槽内容</p>}
        </div>
        <button onClick={handleButtonClick}>点击我</button>
        <style scoped>
          {`
            .my-component {
              border: 1px solid #ccc;
              padding: 10px;
              margin: 10px;
            }
            h3 {
              color: blue;
            }
            button {
              background-color: #4CAF50;
              color: white;
              border: none;
              padding: 10px 20px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
              margin: 4px 2px;
              cursor: pointer;
            }
          `}
        </style>
      </div>
    )
  }
})
